<template>
  <header class="header">
    <div class="header-top">
      <div class="title">
        <el-icon><HomeFilled /></el-icon>
        <span class="title">{{ title }}</span>
      </div>
      <el-breadcrumb class="edit-breadcrumb" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">编辑</el-breadcrumb-item>
        <el-breadcrumb-item>分享</el-breadcrumb-item>
        <el-breadcrumb-item>报表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="action">
        <el-button size="small" type="primary" @click="handleShare">分享</el-button>
        <el-button size="small" type="primary" plain @click="handlePreview">预览</el-button>
      </div>
    </div>
    <ul class="header-bottom-tabs">
      <li
        class="tab"
        v-for="item in tabs"
        :key="item.id"
        :class="{ active: currentTab === item.id }"
      >
        <component
          :is="item.icon"
          style="width: 1em; height: 1em; margin-right: 5px"
          class="icon"
          size="16px"
        />
        <span class="tab-content">{{ item.name }}</span>
      </li>
    </ul>
  </header>
  <div class="main">
    <div class="wj-type-wrap">
      <div class="wj-type-group" v-for="group in qnGroups" :key="group.id">
        <span class="group-name">{{ group.label }}</span>
        <div class="group-content">
          <div
            class="wj-type-item"
            v-for="item in group.childrens"
            :key="item.id"
            @click="handleClick(group.group, item)"
          >
            <span class="item-name">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main-edit-wrap">
      <div class="title-edit">
        <Editable class="title" v-model="title"></Editable>
        <Editable class="sub-title" v-model="subTitle"></Editable>
      </div>
      <draggable v-model="qnData" item-key="id" handle=".drag-handle">
        <template #item="{ element, index }">
          <Question
            :data="element"
            :index="index + 1"
            @click.stop="currentQuestion = element"
            @save="save"
            @delete="onDelete"
            @copy="onCopy"
            :isEdit="true"
            :class="{ active: currentQuestion && currentQuestion.id === element.id }"
          />
        </template>
      </draggable>
    </div>
    <qn-setting-panel
      :class="{ active: currentQuestion }"
      @change="onSettingChange"
      :currentQuestion="currentQuestion"
    />
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import Question from '@/components/Question.vue'
import draggable from 'vuedraggable'
import QnSettingPanel from './QnSettingPanel.vue'
import type { QnGroup, QnType } from '../interfaces/qn'
import Editable from '@/components/Editable.vue'
import QnRenderEngine from '../lib/qnRenderEngine'
import { useQuestionStore } from '@/stores/question'
import { useRouter } from 'vue-router'

const { initQuestionSetting } = useQuestionStore()

const title = ref('问卷标题')
const subTitle = ref('感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！')
const tabs = ref([
  { id: '1', name: '内容', icon: 'Document' },
  { id: '2', name: '设置', icon: 'Setting' },
  { id: '3', name: '逻辑', icon: 'Cpu' },
  { id: '4', name: '样式', icon: 'Brush' }
])
const currentTab = ref('1')
const currentQuestion = ref<any>('')

const qnGroups = ref<QnGroup[]>([
  {
    id: '1',
    label: '选择题',
    group: 'select',
    childrens: [
      { id: 'singleSelect', label: '单选题', type: 'singleSelect' },
      { id: 'multipleSelect', label: '多选题', type: 'multipleSelect' },
      { id: 'dropdown', label: '下拉', type: 'dropdown' },
      { id: 'cascader', label: '级联', type: 'cascader' },
      { id: 'picSelect', label: '图片选择', type: 'picSelect' },
      { id: 'matrixSelect', label: '矩阵选择', type: 'matrixSelect' }
    ]
  },
  {
    id: '2',
    label: '填空',
    group: 'blank',
    childrens: [
      { id: 'input', label: '填空', type: 'input' },
      { id: 'multipleInput', label: '多项填空', type: 'multipleInput' },
      { id: 'horizontalInput', label: '横向填空', type: 'horizontalInput' },
      { id: 'matrixInput', label: '矩阵填空', type: 'matrixInput' }
    ]
  },
  {
    id: '3',
    label: '打分排序',
    group: 'score',
    childrens: [
      { id: 'scale', label: '量表', type: 'scale' },
      { id: 'NPS', label: 'NPS', type: 'NPS' },
      { id: 'score', label: '打分', type: 'score' },
      { id: 'proportion', label: '比重', type: 'proportion' },
      { id: 'sort', label: '排序', type: 'sort' },
      { id: 'classification', label: '分类', type: 'classification' },
      { id: 'matrixScore', label: '矩阵打分', type: 'matrixScore' },
      { id: 'matrixScale', label: '矩阵量表', type: 'matrixScale' }
    ]
  },
  {
    id: '4',
    label: '描述分段',
    group: 'desc',
    childrens: [
      { id: 'desc', label: '段落说明', type: 'desc' },
      { id: 'page', label: '分页', type: 'page' },
      { id: 'divider', label: '分割线', type: 'divider' }
    ]
  }
])
const qnData: any = ref([])
const qnRenderEngine = new QnRenderEngine()

const handleClick = (group: any, item: QnType) => {
  const data = qnRenderEngine.render(group, item.type)
  qnData.value.push(data)
  initQuestionSetting(data.id, {
    showIndex: true,
    layout: 3
  })
}
const handleShare = () => {
  console.log(qnData.value)
}

const router = useRouter()
const handlePreview = () => {
  router.push({
    path: '/preview',
    query: {
      data: JSON.stringify(qnData.id)
    }
  })
}
const save = () => {
  localStorage.setItem(
    'qnJSON',
    JSON.stringify({
      title: title.value,
      subTitle: subTitle.value,
      data: qnData.value
    })
  )
}
const onDelete = (id: string) => {
  qnData.value = qnData.value.filter((item: any) => item.id !== id)
}
const onCopy = (id: string) => {
  const data = qnData.value.find((item: any) => item.id === id)
  const copyData = JSON.parse(JSON.stringify(data))
  qnData.value.push(copyData)
}
watch(
  () => qnData,
  () => {
    save()
  },
  {
    deep: true
  }
)
onMounted(() => {
  document.addEventListener('click', (e: any) => {
    currentQuestion.value = ''
  })

  const store = localStorage.getItem('qnJSON') || ''
  if (store !== '') {
    const qnJSON = JSON.parse(store)
    if (qnJSON.title) {
      title.value = qnJSON.title
    }
    if (qnJSON.subTitle) {
      subTitle.value = qnJSON.subTitle
    }
    if (qnJSON.data) {
      qnData.value = qnJSON.data
    }
  }
})
const onSettingChange = (data: any) => {
  currentQuestion.value.setting[data.key] = data.value
}
</script>

<style lang="scss" scoped>
.header {
  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid var(--color-border);
    .title {
      font-size: 14px;
      display: flex;
      align-items: center;
      .el-icon {
        margin-right: 5px;
      }
    }
  }
  .header-bottom-tabs {
    display: flex;
    height: 35px;
    border-bottom: 1px solid var(--color-border);
    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      width: 100px;
      font-size: 14px;
      &.active {
        color: #409eff;
      }
      .tab-content {
        white-space: nowrap;
      }
      .icon {
        margin-right: 5px;
      }
    }
  }
}
.main {
  display: flex;
  flex-wrap: nowrap;
  background-color: #f7f8fa;
  height: calc(100% - 85px);
  .wj-type-wrap {
    padding: 16px;
    width: 210px;
    box-sizing: content-box;
    border-right: 1px solid var(--color-border);
    background-color: #fff;
    overflow: auto;
    .wj-type-group {
      font-size: 14px;
      margin-bottom: 8px;
      .group-name {
        font-weight: 600;
      }
      .group-content {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 8px;
        gap: 10px;
        .wj-type-item {
          width: 100px;
          background: #f7f8fa;
          padding: 4px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8px;
          cursor: pointer;
          &:hover {
            background: #e6e8eb;
          }
        }
      }
    }
  }
  .main-edit-wrap {
    flex: 1;
    padding: 8px 16px;
    overflow: auto;

    .title-edit {
      background-color: #fff;
      padding: 16px 32px;
      .title {
        font-size: 22px;
      }
      .sub-title {
        font-size: 16px;
      }
    }
  }
}
</style>
